<script setup lang="ts">
import { useGetColor } from '@/utils'
import { useTitle } from '@vueuse/core'
import dayjs from 'dayjs'

export interface IProps {
  title?: string
  date?: number
  category?: string[]
}

const title = useTitle()
const props = withDefaults(defineProps<IProps>(), {
  title: '',
  date: +new Date(),
  category: () => []
})

title.value = props.title
</script>

<template>
  <h1 class="!font900">{{ props.title }}</h1>

  <p>
    <span
      :style="{ color: useGetColor() }"
      v-for="p in category"
      border
      border-current
      rounded
      border-style-solid
      px-1
      pb-0.2
      mb-0
      mr-2
      >{{ p }}</span
    >
  </p>

  <p class="!mb12">{{ dayjs(props.date).format('DD/MM/YYYY') }}</p>
</template>
